<template>
	<div class="city-list" ref="wrapper">
		<div>
			<div class="area">
				<h2 class="city-title">当前城市</h2>
				<ul class="item-list">
					<li class="button-list">{{this.currentCity}}</li>
				</ul>
			</div>
			<div class="area">
				<h2 class="city-title">热门城市</h2>
				<ul class="mp-tr3">
					<li class="mp-name" v-for="item of hot" 
					:key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>
				</ul>
			</div>
			<!-- <div class="area">
				<h2 class="city-title">字母排序</h2>
				<ul class="mp-character-list mp-tr6">
					<li class="zm-name" v-for="(item,key) of cities" :key="key" @click="handleLetterClick">{{key}}</li>
				</ul>
			</div> -->
			<div class="area" v-for="(item, key) of cities" :key="key" :ref="key">
				<h2 class="city-title">{{key}}</h2>
				<ul class="item-list">
					<li class="item border-bottom" v-for="innerItem of item" :key="innerItem.id" @click="handleCityClick(innerItem.name)">{{innerItem.name}}</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapState,mapMutations } from 'vuex'
export default {
	name:'CityList',
	props:{
		hot:Array,
		cities:Object,
		letter:String
	},
	computed:{
		// ...mapState(['city'])
		...mapState({
			currentCity:'city'
		})
	},
	methods:{
		// handleLetterClick(e){
		// 	this.$emit('change',e.target.innerText)
		// }
		handleCityClick(city){
			// this.$store.dispatch('changeCity',city)
			//this.$store.commit('changeCity',city)
			this.changeCity(city)
			this.$router.push('/')
		},
		...mapMutations(['changeCity'])
	},
	watch:{
		letter () {
			if(this.letter){
				const element = this.$refs[this.letter][0];
				console.log(element)
				this.scroll.scrollToElement(element)
			}
			//console.log(this.letter);
		}
	},
	mounted () {
		this.scroll = new BScroll(this.$refs.wrapper)
	},
}	
</script>

<style lang="stylus" scoped>
@import '~styles/veribles.styl'
.city-list
	background: #f5f5f5
	position:absolute
	top:1.58rem
	left:0
	right:0
	bottom:0
	overflow:hidden
	.city-title
		font-size:.24rem
		padding:.24rem .3rem	
	.mp-tr3
		position:relative
		overflow:hidden
		z-index:0
		background:#fff
	.mp-tr3:before
		content:''
		width: 33.33%
		left:33.33%
		position:absolute
		height:100%
		border-left:.02rem solid #ddd
		border-right:.02rem solid #ddd
	.mp-tr3 .mp-name
		width:33.33%
		height:.82rem
		line-height:.82rem
		font-size:.28rem
		text-align:center
		border-bottom:.02rem solid #ddd
		margin-bottom:-1px
		float:left
		position:relative
		z-index:10
		color:#212121
		display:block 
		overflow: hidden
		white-space: nowrap 
		text-overflow: ellipsis
		
	.mp-character-list
		position:relative
		overflow:hidden
		z-index:0
		background:#fff
		padding:.15rem 0
		.zm-name
			width:16.66%
			height:.8rem
			line-height:.8rem
			text-align:center
			font-size:.28rem
			float:left
			z-index:10
			color:#212121
	.item-list
		position:relative
		overflow:hidden
		z-index:0
		background:#fff
		.button-list
			width:1.3rem
			text-align:center
			padding:.15rem .2rem
			border:1px solid #ccc
			border-radius:.05rem
			margin:.2rem
	.item-list li
		width:100%
		padding:.25rem .3rem
	.border-bottom
		&:before
			border-color:#ccc
</style>